import React, { Component } from 'react'
import { GoodFoodContainer } from '../style'

// 滚动库
import BetterScroll from 'better-scroll'

// let bs = new BetterScroll('.wrapper', {})

class GoodFood extends Component {
  getData = () => {
    this.props.getData()
  }

  componentDidMount() {
    // 在初始化时，props中的数据还是没有，这时它的内容的高度还太小，不满足滚动的条件
    this.bs = new BetterScroll('.wrapper', { pullUpLoad: true, click: true })
    this.bs.on('pullingUp', () => {
      console.log('进行网络请求')
      this.props.getData()
      this.bs.finishPullUp()
    })
  }

  componentDidUpdate(prevProps, prevState) {
    // 只有当有数据时，才进行重新计算
    if (this.props.data.length > 0) {
      // .wrapper  ==>  ref
      setTimeout(() => {
        // props数据变化时会，重新计算一下，这样就会有实际的内容高度，这样就满足了滚动条件
        this.bs.refresh()
        // 向上要设置为负数
        this.bs.scrollBy(0, -100)
      }, 100)
    }
  }

  render() {
    return (
      <GoodFoodContainer>
        <h1>精品好菜</h1>
        <div className="wrapper">
          <div className="content">
            {this.props.data.map((item, index) => (
              <dl key={index}>
                <dt>
                  <img
                    onClick={() => {
                      console.log('点击事件')
                    }}
                    src={item.img}
                  />
                </dt>
                <dd>
                  <h3>{item.name}</h3>
                  <p>1000浏览 2000收藏</p>
                </dd>
              </dl>
            ))}
          </div>
        </div>
      </GoodFoodContainer>
    )
  }
}

export default GoodFood
